<!--个人中心-->


<template>
  <div class="body_2605373">
    <div class="div">

      <div class="div_1">
        <!--      主人信息栏-->
        <div class="div_2">
          <div class="div_3">
            <div class="div_4">
              <div class="div_5">
                <span class="text"> {{ userInfo.username }} </span>
                <div class="div_6">
                  <div class="span">
                    <img
                        class="svg"
                        src="../assets/img/phone.png"><span
                      class="text_1"> {{ userInfo.phone }}</span>
                  </div>
                  <div class="span_1">
                    <img
                        class="svg_1"
                        src="../assets/img/address.png"/><span
                      class="text_2">{{ userInfo.address }}

                    </span>
                  </div>
                </div>
                <div class="div_7" @click="editInfo()"><span class="text_3"> 编辑资料 </span></div>
              </div>
              <!--              {{userInfo}}-->
              <!--              头像-->
              <div class="div_8">
                <img
                    style="width: 100px; height: 100px;border-radius: 5px"
                    :src="userInfo.avatar"
                />
              </div>
            </div>
            <div class="div_9">
              <div class="div_10"><span class="text_5"> {{ totalPets }} </span><span class="text_6"> 我的宠物 </span></div>
              <div class="div_11"><span class="text_7"> {{ petHealthRecordNum }} </span><span class="text_8"> 体检记录 </span></div>
              <div class="div_12"><span class="text_9"> {{ petHealthRecordNum }}  </span><span class="text_10"> 体检报告 </span></div>
            </div>

          </div>
        </div>

        <!--      宠物卡片信息栏-->
        <div class="div_13">
          <div class="div_14" v-for="item in petInfo">
            <div class="div_15">
              <div>
                <img :src="item.mainImg" class="img_1"/>
              </div>
            </div>
            <div class="div_16">
              <div class="div_17">
                <div class="div_18"><span class="text_11"> {{ item.petName }} </span><span
                    class="text_12"> {{ item.specis }} / {{ item.age }} </span>
                </div>
                <span class="text_13"> 已绑定 </span>
              </div>
              <div class="div_19">
                <div class="div_20">
                  <img
                      class="svg_3"
                      src="https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58405845503/01b1/a340/4bbd/1b879025e66c8c62abb00b9a0be62b60.png"/><span
                    class="text_14"> {{ item.gender === 0 ? '公' : '母' }} </span>
                </div>
                <div class="div_21">
                  <div class="i">
                    <img
                        class="svg_4"
                        src="https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58405846563/6ee2/7a81/bf3f/ee611d1826fb7bd0f1cdeda24c42e91d.png"/>
                  </div>
                  <span class="text_15">{{ item.weight }}kg </span>
                </div>
              </div>
              <div class="div_22">
                <span @click="getPetFileInfo(item)" class="hover-text"> 查看档案 </span>
<!--                <span @click="handleEdit(item)"> 编辑档案 </span>-->
                <span @click="deletePet(item.petId)"  class="hover-text"> 删除宠物 </span>
                <div class="button_1" @click="handleEdit(item)">
                  <img
                      class="svg_5"
                      src="https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58405845567/c422/048b/0d63/df4c85b6f9aafc5f7f3150c8418b2bbf.png"/>
                </div>
              </div>
            </div>
          </div>


        </div>
        <!--        添加宠物-->
        <div class="div_41">
          <div class="button_4">
            <div class="img_4"></div>
            <span class="text_29" @click="petdialogVisible=true"> 添加新宠物 </span>
          </div>
        </div>
        <!-- 用户信息-编辑资料-弹出框（按钮） -->
        <el-dialog v-if="dialogVisible" title="编辑资料" v-model="dialogVisible" width="50%">
          <el-form :v-model="userForm" label-width="100px">
            <el-form-item label="用户名">
              <el-input v-model="userForm.username"></el-input>
            </el-form-item>
            <el-form-item label="全名">
              <el-input v-model="userForm.fullName"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="userForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="userForm.idCardNo"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="userForm.gender" placeholder="请选择性别">
                <el-option
                    v-for="item in petGenderOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="userForm.age"></el-input>
            </el-form-item>
            <el-form-item label="头像">
              <el-input v-model="userForm.avatar"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="userForm.address"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-input v-model="userForm.createTime" disabled></el-input>
            </el-form-item>
            <el-form-item label="更新时间">
              <el-input v-model="userForm.updateTime" disabled></el-input>
            </el-form-item>
          </el-form>
          <template #footer class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </template>

        </el-dialog>
        <!--添加宠物弹出框-->
        <el-dialog v-if="petdialogVisible" title="添加新宠物" v-model="petdialogVisible" width="50%">
          <el-form :model="petForm" label-width="100px">
            <el-form-item label="宠物名称">
              <el-input v-model="petForm.petName"></el-input>
            </el-form-item>
            <el-form-item label="宠物种类">
              <el-input v-model="petForm.species"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="petForm.age"></el-input>
            </el-form-item>
            <el-form-item label="体重">
              <el-input v-model="petForm.weight"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="petForm.gender" placeholder="选择公母">
                <el-option label="公" value=0></el-option>
                <el-option label="母" value=1></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-input v-model="petForm.status"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
    <el-button @click="petdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addPet">确 定</el-button>
  </span>
        </el-dialog>
        <!--查看宠物档案-->
        <el-dialog v-if="checkPetFileInfo" v-model="checkPetFileInfo" width="40%">
          <div>
            <el-form :model="petFile" label-width="100px">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="宠物主人">
                    <div>{{ userInfo.username }}</div>
                  </el-form-item>
                  <el-form-item label="宠物名称">
                    <div>{{ petFile.petName }}</div>
                  </el-form-item>
                  <el-form-item label="种类">
                    <div>{{ petFile.specis }}</div>
                  </el-form-item>
                  <el-form-item label="年龄">
                    <div>{{ petFile.age }}</div>
                  </el-form-item>
                  <el-form-item label="体重">
                    <div>{{ petFile.weight }}</div>
                  </el-form-item>
                  <el-form-item label="性别">
                    <div>{{ petFile.gender === 0 ? '公' : '母' }}</div>
                  </el-form-item>
                  <el-form-item label="毛发长度">
                    <div>{{ petFile.hairLength }}</div>
                  </el-form-item>
                  <el-form-item label="疫苗接种记录">
                    <div>{{ petFile.vaccinationReconds }}</div>
                  </el-form-item>
                  <el-form-item label="驱虫记录">
                    <div>{{ petFile.dewormingRecord }}</div>
                  </el-form-item>
                  <el-form-item label="疾病史">
                    <div>{{ petFile.medicalHistory }}</div>
                  </el-form-item>
                  <el-form-item label="过敏史">
                    <div>{{ petFile.allergyHistory }}</div>
                  </el-form-item>
                  <el-form-item label="性格特点">
                    <div>{{ petFile.personalityTraits }}</div>
                  </el-form-item>
                  <el-form-item label="饮食习惯">
                    <div>{{ petFile.dietaryHabits }}</div>
                  </el-form-item>
                  <el-form-item label="活动习惯">
                    <div>{{ petFile.activityPreferences }}</div>
                  </el-form-item>
                  <el-form-item label="睡眠习惯">
                    <div>{{ petFile.sleepHabits }}</div>
                  </el-form-item>
                  <el-form-item label="运动习惯">
                    <div>{{ petFile.sportHabits }}</div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-dialog>
        <!--编辑宠物弹出框-->
        <el-dialog v-if="editPetDialogVisible2" title="编辑宠物信息" v-model="editPetDialogVisible2" width="50%">
          <el-form :v-model="petFile" label-width="100px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="宠物名称">
                  <el-input v-model="petFile.petName" placeholder="请输入宠物名称"></el-input>
                </el-form-item>
                <el-form-item label="种类">
                  <el-input v-model="petFile.specis" placeholder="请输入宠物种类"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                  <el-input v-model="petFile.age" placeholder="请输入宠物年龄"></el-input>
                </el-form-item>
                <el-form-item label="体重">
                  <el-input v-model="petFile.weight" placeholder="请输入宠物体重"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                  <el-select
                      v-model="petFile.gender"
                      placeholder="请选择宠物性别"
                      size="large"
                  >
                    <el-option
                        v-for="item in petGenderOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="毛发长度">
                  <el-input v-model="petFile.hairLength" placeholder="请输入宠物毛发长度"></el-input>
                </el-form-item>
                <el-form-item label="疫苗接种记录">
                  <el-input v-model="petFile.vaccinationRecords"
                            placeholder="请输入宠物疫苗接种记录"></el-input>
                </el-form-item>
                <el-form-item label="驱虫记录">
                  <el-input v-model="petFile.dewormingRecords"
                            placeholder="请输入宠物驱虫记录"></el-input>
                </el-form-item>
                <el-form-item label="疾病史">
                  <el-input v-model="petFile.medicalHistory" placeholder="请输入宠物疾病史"></el-input>
                </el-form-item>
                <el-form-item label="过敏史">
                  <el-input v-model="petFile.allergyHistory" placeholder="请输入宠物过敏史"></el-input>
                </el-form-item>
                <el-form-item label="性格特点">
                  <el-input v-model="petFile.personalityTraits"
                            placeholder="请输入宠物性格特点"></el-input>
                </el-form-item>
                <el-form-item label="饮食习惯">
                  <el-input v-model="petFile.dietaryHabits" placeholder="请输入宠物饮食习惯"></el-input>
                </el-form-item>
                <el-form-item label="活动习惯">
                  <el-input v-model="petFile.activityPreferences"
                            placeholder="请输入宠物活动习惯"></el-input>
                </el-form-item>
                <el-form-item label="睡眠习惯">
                  <el-input v-model="petFile.sleepHabits" placeholder="请输入宠物睡眠习惯"></el-input>
                </el-form-item>
                <el-form-item label="运动习惯">
                  <el-input v-model="petFile.sportHabits" placeholder="请输入宠物运动习惯"></el-input>
                </el-form-item>
                <el-button type="primary" @click="updatePet">确定</el-button>
                <el-button @click="editPetDialogVisible2 = false">取 消</el-button>
              </el-col>
            </el-row>
          </el-form>

        </el-dialog>
      </div>
    </div>


  </div>
</template>
<script>
import {getUserInfo, updateUserInfo} from "@/api/user";
import {getPetListAPI, addPetInfo, addPet, deletePet, editPetInfo, getPetHealthRecordNumAPI} from "@/api/petApi";
import {Plus} from '@element-plus/icons-vue'
import petFile from "@/views/PetFile";


export default {
  name: "PersonalCenter",
  // data里面放变量用的
  data() {
    return {
      // 宠物健康报告数量
      petHealthRecordNum: 0,
      healthReportCount: 0, // 新增体检报告数量
      Plus,
      editPetDialogVisible: false,
      editPetDialogVisible2: false,
      petGenderOptions:[
        {label:"公",value:0},
        {label:"母",value:1}
      ],
      options:
          [
            {
              value: 0,
              label: '公',
            },
            {
              value: 1,
              label: '母',
            }
          ],
      userInfo:
          {
            username: '',
            phone: '',
            avatar: '',
            role: '',
            status: '',
            createTime: '',
            updateTime: '',
            id: '1',
            password: '',
            nickname: '',
            sex: '',
            age: '',
          },

      dialogVisible: false,
      checkdialogVisible: false,
      userForm: {
        username: '',
        phone: '',
        avatar: '',
        role: '',
        status: '',
        createTime: '',
        updateTime: '',
        id: '1',
        password: '',
        nickname: '',
        sex: '',
        age: '',
      },

      petInfo: {
        petId: 1,
        petName: "小白",
        specis: "狗",
        age: 3,
        weight: 0,
        gender: 0,
        dateOfBirth: 1621440000000,
        size: "中型",
        hairLength: "短毛",
        color: "白色",
        vaccinationReconds: 0,
        vaccinationRecond: '',
        dewormingRecords: 0,
        dewormingRecord: '',
        medicalHistory: "无",
        allergyHistory: "无",
        personalityTraits: "活泼粘人",
        dietaryHabits: "喜欢鸡肉和狗粮",
        activityPreferences: "喜欢跑步和玩球",
        sleepHabits: "喜欢睡觉",
        sportHabits: "习惯运动",
        coverImg: "http://localhost:8090/image/大狗 (2).png",
        mainImg: "http://localhost:8090/imag1312312313e/大狗 (2).png",
        imgs: "http://localhost:8090/image/大狗 (3).png;http://localhost:8090/image/大狗 (4).png;http://localhost:8090/image/大狗 (5).png"
      },
      petdialogVisible: false,
      //宠物表单
      petForm: {
        petId: 1,
        petName: "",
        specis: "",
        age: "",
        weight: "",
        gender: "",
        dateOfBirth: "",
        size: "",
        hairLength: "",
        color: "",
        vaccinationReconds: "0",
        vaccinationRecond: '',
        dewormingRecords: 0,
        dewormingRecord: '',
        medicalHistory: "",
        allergyHistory: "",
        personalityTraits: "",
        dietaryHabits: "",
        activityPreferences: "",
        sleepHabits: "",
        sportHabits: "",
        coverImg: "",
        mainImg: "",
        imgs: ""
      },
      petFile: {},
      editForm:{
        petId: 1,
        petName: "",
        specis: "",
        age: "",
        weight: "",
        gender: "",
        dateOfBirth: "",
        size: "",
        hairLength: "",
        color: "",
        vaccinationReconds: "0",
        vaccinationRecond: '',
        dewormingRecords: 0,
        dewormingRecord: '',
        medicalHistory: "",
        allergyHistory: "",
        personalityTraits: "",
        dietaryHabits: "",
        activityPreferences: "",
        sleepHabits: "",
        sportHabits: "",
        coverImg: "",
        mainImg: "",
        imgs: ""
      },
      checkPetFileInfo: false,
      totalPets: 0// 添加 totalPets 变量
    };
  },
  // methods里面是定义函数的
  methods: {
    getPetHealthRecordNum() {
      getPetHealthRecordNumAPI().then(res => {
        let num = res.data
        // 健壮性：判断num是不是一个合理的数
        if (isNaN(num)) {
          num = 0
        }
        this.petHealthRecordNum = num
      })
    },
    // // 获取健康报告
    // async getHealthReportCount() {
    //   try {
    //     const res = await getHealthReportCount(); // 调用后端API
    //     this.healthReportCount = res.data; // 假设返回 { data: 8 }
    //   } catch (err) {
    //     console.error("获取体检报告数失败:", err);
    //     this.healthReportCount = 0; // 失败时默认显示 0
    //   }
    // },
    deletePet(petId) {

      editPetInfo({petId: petId, isDelete: 1}).then(res => {
        this.$message.success('宠物删除成功');
        this.getPetInfo(); // 刷新宠物信息
      }).catch(err => {
        this.$message.error('宠物删除失败');
      });
    },
    getUserInfo() {
      getUserInfo().then(res => {
        this.userInfo = res.data;

      })
    },
    // 编辑用户信息
    editInfo() {
      this.userForm = {...this.userInfo}; // 使表单初始化为当前用户信息
      this.dialogVisible = true;

    },
    submitForm() {
      // 提交表单数据到后端
      updateUserInfo(this.userForm).then(res => {
        this.$message.success('更新成功');
        this.dialogVisible = false;
        this.getUserInfo(); // 刷新用户信息
      }).catch(err => {
        this.$message.error('更新失败');
      });
    },
    getPetInfo() {
      getPetListAPI().then(res => {
        this.petInfo = res.data;
        this.totalPets = this.petInfo.length; // 计算宠物数量
      })
    },
    addPet() {
      // console.log("提交的数据：", this.petForm);
      addPet(this.petForm).then(res => {
        this.$message.success('宠物添加成功');
        this.petdialogVisible = false;
        this.getPetInfo(); // 刷新宠物信息
      }).catch(err => {
        this.$message.error('宠物添加失败');
      });
      // 将宠物信息添加到 pets 数组中
      this.pets.push({...this.petForm});
      this.petDialogVisible = false;
      this.$message.success('宠物添加成功');
      // // 清空表单
      // this.petForm = {
      //   petName: '',
      //   age: '',
      //   specis: '',
      //   size: '',
      //   color: '',
      //   weight: '',
      //   gender: '',
      //   hairLength: '',
      //   vaccinationRecords: '',
      //   dewormingRecords: '',
      //   medicalHistory: '',
      //   allergyHistory: '',
      //   personalityTraits: '',
      //   dietaryHabits: '',
      //   activityPreferences: '',
      //   sleepHabits: '',
      //   sportHabits: ''
      // };
    },
    editPet(pet) {
      // 将当前宠物信息复制到编辑表单中
      this.editPetForm = {...pet};
      this.editPetDialogVisible = true;
    },
    handleEdit(item) {
      console.log(item)
      this.petFile = {...item};
      this.editPetDialogVisible2 = true;
    },

    getPetFileInfo(item) {
      this.checkPetFileInfo = !this.checkPetFileInfo
      this.petFile = item
    },
    updatePet() {
      // 调用后端 API 更新宠物信息
      editPetInfo(this.petFile).then(res => {
        this.$message.success('宠物信息更新成功');
        this.editPetDialogVisible2 = false; // 关闭编辑宠物对话框
        this.getPetInfo(); // 刷新宠物信息
      }).catch(err => {
        this.$message.error('宠物信息更新失败');
      });
    },


  },
  // mounted,是放页面加载就会执行的代码
  mounted() {
    this.getPetHealthRecordNum()
    this.getUserInfo()
    this.getPetInfo()
  }


}
</script>
<style>
* {
  box-sizing: border-box;
}

/* 鼠标悬停时的字体颜色改变 */
.hover-text {
  cursor: pointer;
  transition: color 0.3s ease;
}

.hover-text:hover {
  color: #3b82f6; /* 您可以自定义颜色 */
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  display: flex;
  justify-content: flex-start;
}

.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}

.justify-between {
  display: flex;
  justify-content: space-between;
}

.items-start {
  display: flex;
  align-items: flex-start;
}

.items-end {
  display: flex;
  align-items: flex-end;
}

.items-center {
  display: flex;
  align-items: center;
}

.no-shrink {
  flex-shrink: 0;
}
</style>
<style scoped>
/* BODY-2605373 */
.body_2605373 {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #f9fafb;
  min-height: 100%;
}

/* DIV */
.div {
  width: 100%;
  height: auto; /* 修改为 auto */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 64px;
  padding-bottom: 32px;
  gap: 10px;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_1 {
  width: 100%; /* 修改为 100% 以适应容器宽度 */
  height: auto; /* 修改为 auto */
  position: relative;
  top: 64px;
  left: 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 32px;
  padding-right: 32px;
  padding-bottom: 32px;
  padding-left: 32px;
  gap: 10px;
  flex-shrink: 0;
}

/* DIV */
.div_2 {
  width: 1216px;
  height: 164px;
  position: relative;
  top: 0; /* 修改为 0 */
  left: 0; /* 修改为 0 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

/* DIV */
.div_3 {
  width: 1168px;
  height: 116px;
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
}

/* DIV */
.div_4 {
  width: 457px;
  height: 116px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
}

/* DIV */
.div_5 {
  position: absolute;
  width: 337px;
  height: 116px;
  top: 0;
  left: 120px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* H2 */
.text {
  width: 100%;
  height: 32px;
  font-size: 24px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 32px;
  color: #1f2937;
  white-space: pre;
  padding-top: 0;
  padding-right: 265px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_6 {
  width: 100%;
  height: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  margin-top: 8px;
  margin-left: 0;
}

/* SPAN */
.span {
  position: absolute;
  width: 108px;
  height: 20px;
  top: 0;
  left: 0;
  flex-shrink: 0;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  white-space: pre;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* SVG */
.svg {
  width: 14px;
  height: 14px;
  position: relative;
  flex-shrink: 0;
  margin-left: 0;
  margin-top: 3px;
}

/* 138 **** 5678 */
.text_1 {
  position: relative;
  flex-shrink: 0;
  margin-left: 8px;
  margin-top: 0;
}

/* SPAN */
.span_1 {
  position: absolute;
  width: 213px;
  height: 20px;
  top: 0;
  left: 124px;
  flex-shrink: 0;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  white-space: pre;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* SVG */
.svg_1 {
  width: 14px;
  height: 14px;
  position: relative;
  flex-shrink: 0;
  margin-left: 0;
  margin-top: 3px;
}

/* xiaoming.wang@example.com */
.text_2 {
  position: relative;
  flex-shrink: 0;
  margin-left: 8px;
  margin-top: 0;
}

/* DIV */
.div_7 {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  margin-top: 16px;
  margin-left: 0;
  cursor: pointer;
}

/* BUTTON */
.text_3 {
  width: 96px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-left: 16px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 4px;
  background-color: #3b82f6;
  text-align: center;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #ffffff;
  white-space: pre;
}

/* BUTTON */
.text_4 {
  width: 96px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 112px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-left: 16px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 4px;
  background-color: #f3f4f6;
  text-align: center;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #374151;
  white-space: pre;
}

/* DIV */
.div_8 {
  position: absolute;
  width: 96px;
  height: 96px;
  top: 10px;
  left: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* IMG */
.img {
  position: relative;
  width: 100%;
  height: 96px;
  border-radius: 9999px;
  /*background: url(https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58405846254/f3fe/ec26/a27f/73918f5058acc116a14f359f8a0adfb6.png) center / cover no-repeat;*/
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
  margin-left: 0;
}


/* SVG */
.svg_2 {
  width: 22px;
  height: 22px;
  position: absolute;
  top: 11px;
  left: 8px;
  flex-shrink: 0;
  margin-top: 0px;
  margin-right: 0;
  margin-bottom: -1px;
  margin-left: 0;
}

/* DIV */
.div_9 {
  width: 256px;
  height: 56px;
  position: absolute;
  top: 0;
  left: 912px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
}

/* DIV */
.div_10 {
  position: absolute;
  width: 64px;
  height: 56px;
  top: 0;
  left: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* DIV */
.text_5 {
  width: 100%;
  height: 32px;
  text-align: center;
  font-size: 24px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 32px;
  color: #1f2937;
  white-space: pre;
  padding-top: 0;
  padding-right: 25px;
  padding-bottom: 0;
  padding-left: 25px;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.text_6 {
  width: 100%;
  height: 24px;
  text-align: center;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_11 {
  position: absolute;
  width: 64px;
  height: 56px;
  top: 0;
  left: 96px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* DIV */
.text_7 {
  width: 100%;
  height: 32px;
  text-align: center;
  font-size: 24px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 32px;
  color: #1f2937;
  white-space: pre;
  padding-top: 0;
  padding-right: 18px;
  padding-bottom: 0;
  padding-left: 18px;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.text_8 {
  width: 100%;
  height: 24px;
  text-align: center;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_12 {
  position: absolute;
  width: 64px;
  height: 56px;
  top: 0;
  left: 192px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* DIV */
.text_9 {
  width: 100%;
  height: 32px;
  text-align: center;
  font-size: 24px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 32px;
  color: #1f2937;
  white-space: pre;
  padding-top: 0;
  padding-right: 25px;
  padding-bottom: 0;
  padding-left: 25px;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.text_10 {
  width: 100%;
  height: 24px;
  text-align: center;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_13 {
  /*position: absolute;*/
  width: 1300px;
  max-height: 600px; /* 设置一个最大高度，根据需要调整 */
  overflow-y: auto; /* 启用垂直滚动 */
  top: 228px;
  left: 32px;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 允许换行 */
  gap: 24px; /* 子元素之间的间距 */
}

/* DIV */
.div_14 {
  position: relative;
  width: 389px;
  height: 416px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0; /* 移除左边距，由父容器控制间距 */
  margin-top: 0;
}

/* DIV */
.div_15 {
  position: relative;
  width: 100%;
  height: 192px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
  margin-left: 0;
}

/* IMG */
.img_1 {
  width: 100%;
  height: 192px;
  /*background: url(https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58405846416/5c60/c587/15cb/7465ef0ceab1d3bef2abd366de153669.png) center / cover no-repeat;*/
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_16 {
  width: 100%;
  height: 224px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  gap: 10px;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_17 {
  width: 341px;
  height: 48px;
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
}

/* DIV */
.div_18 {
  position: absolute;
  width: 105px;
  height: 48px;
  top: 0;
  left: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* H3 */
.text_11 {
  width: 100%;
  height: 28px;
  font-size: 20px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 28px;
  color: #1f2937;
  white-space: pre;
  padding-top: 0;
  padding-right: 45px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* P */
.text_12 {
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* SPAN */
.text_13 {
  width: 58px;
  height: 28px;
  position: absolute;
  top: 0;
  left: 283px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 4px;
  padding-right: 8px;
  padding-bottom: 4px;
  padding-left: 8px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #dbeafe;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #2563eb;
  white-space: pre;
}

/* DIV */
.div_19 {
  position: absolute;
  width: 341px;
  height: 56px;
  top: 88px;
  left: 24px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* DIV */
.div_20 {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* SVG */
.svg_3 {
  width: 20px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 0;
  flex-shrink: 0;
  margin-top: 0px;
  margin-right: 0;
  margin-bottom: -1px;
  margin-left: 0;
}

/* SPAN */
.text_14 {
  width: 32px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 20px;
  flex-shrink: 0;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* DIV */
.div_21 {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  margin-top: 8px;
  margin-left: 0;
}

/* I */
.i {
  position: absolute;
  width: 20px;
  height: 16px;
  top: 4px;
  left: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg_4 {
  width: 16px;
  height: 16px;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* SPAN */
.text_15 {
  width: 43px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 20px;
  flex-shrink: 0;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* DIV */
.div_22 {
  width: 200px; /* 增加宽度以容纳两个按钮 */
  height: 40px;
  position: absolute;
  top: 160px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* 使用 space-between 均匀分布按钮 */
  align-items: flex-start;
  flex-shrink: 0;
  cursor: pointer;
}

/* BUTTON */
.text_16 {
  width: 72px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 4px;
  background-color: #3b82f6;
  text-align: center;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #ffffff;
  white-space: pre;
  padding-right: 0;
  padding-left: 0;
  cursor: pointer;
}

/* BUTTON */
.button_1 {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 301px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 8px;
  padding-right: 12px;
  padding-bottom: 8px;
  padding-left: 12px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 4px;
  background-color: #f3f4f6;
}

/* SVG */
.svg_5 {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 11px;
  left: 12px;
  flex-shrink: 0;
  margin-top: 0px;
  margin-right: -1px;
  margin-bottom: -1px;
  margin-left: 0px;
}

/* DIV */
.div_23 {
  position: relative;
  width: 389px;
  height: 416px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 24px;
  margin-top: 0;
}

/* DIV */
.div_24 {
  position: relative;
  width: 100%;
  height: 192px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
  margin-left: 0;
}

/* IMG */
.img_2 {
  width: 100%;
  height: 192px;
  background: url(https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58405844917/3fe3/662c/5328/f632f230b14511c55ef76dfc6330cb11.png) center / cover no-repeat;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_25 {
  width: 100%;
  height: 224px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  gap: 10px;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_26 {
  width: 341px;
  height: 48px;
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
}

/* DIV */
.div_27 {
  position: absolute;
  width: 88px;
  height: 48px;
  top: 0;
  left: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* H3 */
.text_17 {
  width: 100%;
  height: 28px;
  font-size: 20px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 28px;
  color: #1f2937;
  white-space: pre;
  padding-top: 0;
  padding-right: 48px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* P */
.text_18 {
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* SPAN */
.text_19 {
  width: 58px;
  height: 28px;
  position: absolute;
  top: 0;
  left: 283px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 4px;
  padding-right: 8px;
  padding-bottom: 4px;
  padding-left: 8px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #dbeafe;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #2563eb;
  white-space: pre;
}

/* DIV */
.div_28 {
  position: absolute;
  width: 341px;
  height: 56px;
  top: 88px;
  left: 24px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* DIV */
.div_29 {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* I */
.i_1 {
  position: absolute;
  width: 20px;
  height: 16px;
  top: 4px;
  left: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg_6 {
  width: 11px;
  height: 16px;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* SPAN */
.text_20 {
  width: 32px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 20px;
  flex-shrink: 0;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* DIV */
.div_30 {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  margin-top: 8px;
  margin-left: 0;
}

/* I */
.i_2 {
  position: absolute;
  width: 20px;
  height: 16px;
  top: 4px;
  left: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg_7 {
  width: 16px;
  height: 16px;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* SPAN */
.text_21 {
  width: 43px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 20px;
  flex-shrink: 0;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* DIV */
.div_31 {
  width: 341px;
  height: 40px;
  position: absolute;
  top: 160px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
}

/* BUTTON */
.text_22 {
  width: 289px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 4px;
  background-color: #3b82f6;
  text-align: center;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #ffffff;
  white-space: pre;
  padding-right: 0;
  padding-left: 0;
}

/* BUTTON */
.button_2 {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 301px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 8px;
  padding-right: 12px;
  padding-bottom: 8px;
  padding-left: 12px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 4px;
  background-color: #f3f4f6;
}

/* SVG */
.svg_8 {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 11px;
  left: 12px;
  flex-shrink: 0;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: -1px;
  margin-left: -1px;
}

/* DIV */
.div_32 {
  position: relative;
  width: 389px;
  height: 416px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 25px;
  margin-top: 0;
}

/* DIV */
.div_33 {
  position: relative;
  width: 100%;
  height: 192px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
  margin-left: 0;
}

/* IMG */
.img_3 {
  width: 100%;
  height: 192px;
  background: url(https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58405847368/bc4f/f3bf/0f06/c0e179f8269e8fe3a3a1cd67a9fd845d.png) center / cover no-repeat;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_34 {
  width: 100%;
  height: 224px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  gap: 10px;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* DIV */
.div_35 {
  width: 341px;
  height: 48px;
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
}

/* DIV */
.div_36 {
  position: absolute;
  width: 105px;
  height: 48px;
  top: 0;
  left: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* H3 */
.text_23 {
  width: 100%;
  height: 28px;
  font-size: 20px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 28px;
  color: #1f2937;
  white-space: pre;
  padding-top: 0;
  padding-right: 65px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* P */
.text_24 {
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* SPAN */
.text_25 {
  width: 58px;
  height: 28px;
  position: absolute;
  top: 0;
  left: 283px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 4px;
  padding-right: 8px;
  padding-bottom: 4px;
  padding-left: 8px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #dbeafe;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #2563eb;
  white-space: pre;
}

/* DIV */
.div_37 {
  position: absolute;
  width: 341px;
  height: 56px;
  top: 88px;
  left: 24px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* DIV */
.div_38 {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* I */
.i_3 {
  position: absolute;
  width: 20px;
  height: 16px;
  top: 4px;
  left: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg_9 {
  width: 14px;
  height: 16px;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* SPAN */
.text_26 {
  width: 32px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 20px;
  flex-shrink: 0;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* DIV */
.div_39 {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  margin-top: 8px;
  margin-left: 0;
}

/* I */
.i_4 {
  position: absolute;
  width: 20px;
  height: 16px;
  top: 4px;
  left: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg_10 {
  width: 16px;
  height: 16px;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}

/* SPAN */
.text_27 {
  width: 39px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 20px;
  flex-shrink: 0;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #4b5563;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* DIV */
.div_40 {
  width: 341px;
  height: 40px;
  position: absolute;
  top: 160px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
}

/* BUTTON */
.text_28 {
  width: 289px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 4px;
  background-color: #3b82f6;
  text-align: center;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #ffffff;
  white-space: pre;
  padding-right: 0;
  padding-left: 0;
}

/* BUTTON */
.button_3 {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 301px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 8px;
  padding-right: 12px;
  padding-bottom: 8px;
  padding-left: 12px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 4px;
  background-color: #f3f4f6;
}

/* SVG */
.svg_11 {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 11px;
  left: 12px;
  flex-shrink: 0;
  margin-top: 0px;
  margin-right: 0;
  margin-bottom: -1px;
  margin-left: 0;
}

/* DIV */
.div_41 {
  width: 1216px;
  height: 48px;
  position: absolute;
  top: 668px;
  left: 32px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
}

/* BUTTON */
.button_4 {
  width: 150px;
  height: 48px;
  position: absolute;
  top: 0;
  left: 533px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-top: 12px;
  padding-right: 24px;
  padding-bottom: 12px;
  padding-left: 24px;
  flex-shrink: 0;
  border-radius: 4px;
  background-color: #3b82f6;
}

/* IMG */
.img_4 {
  width: 14px;
  height: 16px;
  position: absolute;
  top: 16px;
  left: 24px;
  flex-shrink: 0;
  background: url(https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/56654166233/b77c/ce21/5137/b6e42caa81345fcb85b1677a203cacb7.png) center / contain no-repeat;
}

/* SPAN */
.text_29 {
  width: 80px;
  height: 24px;
  position: absolute;
  top: 12px;
  left: 46px;
  flex-shrink: 0;
  text-align: center;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 24px;
  color: #ffffff;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  cursor: pointer;
}
</style>
